<template>
	<view class="content" :style="{background: `url(${imgPath}storage/home/home_bg.png)`}">
		<view class="swiper">
			<u-swiper :list="list"></u-swiper>
		</view>
		<view class="box">
			<view class="temple">
				<view class="temple-left">
					<view class="title">
						{{templeInfo.name}}
					</view>
					<view class="address">
						<uni-icons type="location" size="15"></uni-icons>
						<text>{{templeInfo.address}}</text>
					</view>
				</view>
				<view class="temple-right" @click="goThis">
					<view class="img">
						<u--image :showLoading="true" :src="imgPath + 'storage/home/temple_go.png'" width="50rpx"
							height="50rpx"></u--image>
					</view>
					<view class="text">
						到这去
					</view>
				</view>
			</view>
			<scroll-view class="lamp" scroll-y @scrolltolower="getlamplist">
				<view class="lamp-item" v-for="(item,index) in lampList">
					<view class="lamp-left" @click="setCheck(item.id)">
						<view class="check" v-show="!checkArr.includes(item.id)">
							<u--image :showLoading="true" :src="imgPath + 'storage/home/check.png'" width="40rpx"
								height="40rpx"></u--image>
						</view>
						<view class="check active" v-show="checkArr.includes(item.id)">
							<u--image :showLoading="true" :src="imgPath + 'storage/home/check_active.png'" width="40rpx"
								height="40rpx"></u--image>
						</view>
					</view>
					<view class="lamp-right">
						<view class="lamp-title">
							{{item.lamp_device_no}}（{{index+1}}号莲花灯）
						</view>
						<view class="lamp-state">
							<view>
								{{item.lamp_status==1?"可买":'不可买'}}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="pray" @click="goPary">
			去寺庙
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				servionInfo: '',
				servionInfos: '',
				imgPath: this.$store.state.user.baseURL,
				list: [],
				paging: {
					page: 1,
					limit: 10,
					id: ''
				},
				total: null,
				lampList: [],
				checkArr: [],
				templeInfo: {},
				id: '',
				minisystemInfo: ''
			}
		},
		onLoad({
			id
		}) {
			this.id = id
			this.getTempleInfo()
			this.getlamplist()
			this.servionInfo = uni.getAppBaseInfo()
			this.servionInfos = uni.getAccountInfoSync()
			uni.getStorage({
				key: 'minisystemInfo',
				success: (res) => {
					this.minisystemInfo = res.data
				}
			})
		},
		onShareAppMessage(e) {
			let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
			let currentPage = routes[routes.length - 1].route;
			console.log(currentPage)
			let shareobj = {
				title: this.minisystemInfo.sub_title, //分享的标题
				path: currentPage + '?id=' + this.id, //好友点击分享之后跳转的页面
				imageUrl: this.minisystemInfo.url, //内容图片
			}
			return shareobj //一定要返回对象
		},
		methods: {
			getTempleInfo() {
				this.$api.templeInfo({
					id: this.id
				}).then(res => {
					this.templeInfo = res.data
					this.list = res.data.image_list.map(item => item.img_url)
				})
			},
			getlamplist() {
				if (this.lampList.length == this.total) return
				this.$api.getlamplist(this.paging).then(res => {
					this.lampList = [...this.lampList, ...res.data.list]
					this.total = res.data.total
					this.paging.page++
				})
			},
			setCheck(id) {
				if (this.checkArr.includes(id)) {
					this.checkArr.splice(this.checkArr.indexOf(id), 1)
				} else {
					this.checkArr.push(id)
				}
				console.log(this.checkArr);
			},
			goPary() {
				if (this.checkArr.length == 0) {
					uni.showToast({
						title: '未选择莲花灯',
						icon: 'none'
					})
					return
				}
				uni.navigateTo({
					url: `/pages/pray/pray?temple_id=${this.id}&lotus_lamp_ids=${this.checkArr.join(',')}`
				})
				// if (this.servionInfos.miniProgram.version) {

				// } else {
				// 	this.goThis()
				// }

			},
			goThis() {
				uni.openLocation({
					latitude: parseFloat(this.templeInfo.lat),
					longitude: parseFloat(this.templeInfo.lng),
					address: this.templeInfo.address,
					name: this.templeInfo.name,
					success: (res) => {
						console.log(res);
					},
					fail: (err) => {
						console.log(err);
					}
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		min-height: 100vh;
		z-index: -1;
	}

	.box {
		padding: 0 30rpx;
		transform: translateY(-30rpx);

		.temple {
			box-sizing: border-box;
			height: 180rpx;
			background: #FEF1DC;
			border-radius: 20rpx;
			padding: 42rpx 50rpx 0 30rpx;
			display: flex;
			justify-content: space-between;

			.temple-left {
				.title {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 30rpx;
					color: #111111;
					line-height: 42rpx;
					text-align: left;
					font-style: normal;
				}

				.address {
					padding-top: 10rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 22rpx;
					color: #AAAAAA;
					line-height: 32rpx;
					text-align: left;
					font-style: normal;
					display: flex;

					text {
						padding-left: 5rpx;
					}
				}
			}

			.temple-right {
				display: flex;
				flex-direction: column;
				align-items: center;

				.text {
					padding-top: 5rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #D06122;
					line-height: 34rpx;
					text-align: left;
					font-style: normal;
				}
			}
		}

		.lamp {
			margin-top: 16rpx;
			background: #FEF1DC;
			border-radius: 20rpx;
			height: calc(100vh - 460rpx);
			box-sizing: border-box;
			padding: 0 30rpx 140rpx 30rpx;

			.lamp-item {
				display: flex;
				padding: 38rpx 0;
				border-bottom: 2rpx solid #cccccc;

				.lamp-left {
					margin-top: 20rpx;
				}

				.lamp-right {
					padding-left: 28rpx;

					.lamp-title {
						padding-bottom: 12rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 30rpx;
						color: #111111;
						line-height: 42rpx;
						text-align: left;
						font-style: normal;
					}

					.lamp-state {
						view {
							width: 90rpx;
							height: 38rpx;
							background: #C3EDEF;
							border-radius: 18rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 18rpx;
							color: #008583;
							line-height: 38rpx;
							text-align: center;
							font-style: normal;
						}
					}
				}
			}
		}
	}

	.pray {
		position: fixed;
		bottom: 60rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 630rpx;
		height: 84rpx;
		background: linear-gradient(270deg, #EA6F29 0%, #FAAA7D 100%);
		border-radius: 42rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 84rpx;
		text-align: center;
		font-style: normal;
	}
</style>